<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: YCB
  Date: 2019/9/27
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>大鹏-逍遥游</title>

    <link rel="stylesheet" href= "http://localhost:8080/mydev/css/index.css">
    <link rel="stylesheet" href="${pagebContext.request.contextPath}/dist/css/bootstrap.css">
    <link rel="stylesheet" href="http://localhost:8080/mydev/dist/css/bootstrap-theme.css">
    <script src="http://localhost:8080/mydev/js/index.js"></script>
    <script src="http://localhost:8080/mydev/js/jquery-3.4.1.js"></script>
    <script src="http://localhost:8080/mydev/dist/js/bootstrap.js"></script>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://localhost:8080/mydev/layui/css/layui.css"  media="all">
</head>

<body style="min-width: 1525px">

<c:choose>
    <c:when test="${memberall.userId != 0}">
        <c:if test="${memberall.userStatus == 0}">
            <img src="http://localhost:8080/mydev/images/vip.png" style="position:absolute;top:23px;right: 345px;z-index: 999;">
        </c:if>
        <c:if test="${memberall.userStatus == 1}">
            <a href="http://localhost:8080/mydev/VIP" style="position:absolute;top:13px;right: 390px;z-index: 999;">开通vip</a>
        </c:if>
    </c:when>
</c:choose>




<div class="layui-carousel" id="test10" style="">
    <div carousel-item="" class="carousel">

        <c:forEach var="travelFive" items="${fiveTravel}">
            <div>
                <a href="http://localhost:8080/mydev/travel/${travelFive.travelnote.travId}" class="carousel-a">
                    <div class="carou" style="background-image: url(${travelFive.travelnote.travPic})">
                        <p >  <fmt:formatDate value="${travelFive.travelnote.travDate}" pattern="yyyy-MM-dd"/></p>
                        <span>${travelFive.travelnote.travTitle}</span>
                        <div>
                            <small>图片来自</small>
                            <small style="color: #ff9d00">${travelFive.travelnote.travLoction}</small>
                            <small>，本片由</small>
                            <small style="color: #ff9d00">${travelFive.member.userName}</small>
                            <small>荣誉出品</small>
                        </div>
                    </div>

                </a>
            </div>


        </c:forEach>





        <%--<div>
            <a href="" class="carousel-a">
                <div class="carou"  style="background-image: url(http://localhost:8080/mydev/images/5a.jpg)">
                    <p >2019.9.17</p>
                    <span>西班牙|HOLA！</span>
                    <div>
                        <small>图片来自</small>
                        <small style="color: #ff9d00">西班牙</small>
                        <small>,此目的地共收藏了</small>
                        <small style="color: #ff9d00">100</small>
                        <small>张图片，本片由</small>
                        <small style="color: #ff9d00">ISeven</small>
                        <small>荣誉出品</small>
                    </div>
                </div>

            </a>
        </div>--%>

    </div>
</div>



<div class="header-container" style="width: 100%; min-width: 1500px;  ">

    <div class="row first-div" style="z-index: 999; width: 100%">
        <div class=" left-nav-ul" >
        </div>


        <ul class="mid-nav-ul" >
            <li class="nav-ul-li" >
                <a   style="text-decoration: none" href="http://localhost:8080/mydev/start/index">
                    <div>
                        <img src="http://localhost:8080/mydev/images/logo.png">
                        逍遥游
                    </div>
                </a>

            </li>
            <li class="nav-ul-li" style="background-color: #ff9d00">
                <a style="text-decoration: none;color: #ffffff" href="http://localhost:8080/mydev/start/index">首页</a>
            </li>
            <li class="nav-ul-li">
                <a  style="text-decoration: none" href="http://localhost:8080/mydev/QuestionTable/club_questions">问答</a>
            </li>

            <li class="nav-ul-li">
                <a   style="text-decoration: none" href="http://localhost:8080/mydev/clublist/list">鲲鹏俱乐部</a>
            </li>

            <li class="nav-ul-li new">
                <div class="geren">
                    <a  style="text-decoration: none; color:black" href="">更多</a>
                    <div class="t1"></div>
                </div>
                <div class="hidden1">
                    <ul class="geren-ul">
                        <li>
                            <a  style="text-decoration: none" href="http://localhost:8080/mydev/write/travel">写游记</a>
                        </li>
                        <li>
                            <a  style="text-decoration: none"  href="http://localhost:8080/mydev/myhome/mytravel/${memberall.userId}">我的游记</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="nav-ul-li" >
                <c:choose>
                    <c:when test="${memberall.userId != 0}">
                        <c:if test="${memberall.userStatus ==0}">
                             <span  style="color: gold">
                                 欢迎!${memberall.userName}
                             </span>
                        </c:if>
                        <c:if test="${memberall.userStatus ==1}">
                             <span  style="color: black">
                                 欢迎!${memberall.userName}
                             </span>
                        </c:if>


                    </c:when>
                    <c:otherwise>
                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/regist/normalRegist">注册</a>
                    </c:otherwise>
                </c:choose>

            </li>
            <li class="nav-ul-li">
                <c:choose>
                    <c:when test="${memberall.userId != 0}">

                    </c:when>
                    <c:otherwise>
                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/login/login">登陆</a>
                    </c:otherwise>
                </c:choose>


            </li>
        </ul>




        <c:choose>
            <c:when test="${memberall.userId != 0}">

                <div class="right-nav-ul" >
                    <div class="topmaguser" style="  position:relative;left: 0px;top:2px">


                        <a href="http://localhost:8080/mydev/myhome/mytravel/${memberall.userId}" >
                            <img src="http://localhost:8080/mydev/${memberall.userPicture}">
                        </a>

                    </div>
                    <ul class="right-mid" >
                        <li class="nav-ul-li new" >

                            <div class="geren">

                                <a style="text-decoration: none; color:black" href="">个人中心</a>

                                <div class="t2"></div>
                            </div>

                            <div class="hidden1">
                                <ul class="gere-ul">

                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/collect/${memberall.userId}"><img src="http://localhost:8080/mydev/images/savea.png">我的收藏</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/mapview/${memberall.userId}"><img src="http://localhost:8080/mydev/images/foot.png">我的足迹</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/answer/${memberall.userId}"><img src="http://localhost:8080/mydev/images/question.png">我的问答</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/reply/toaccount/${memberall.userId}"><img src="http://localhost:8080/mydev/images/question.png">回复消息</a>
                                    </li>

                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/exit"><img src="http://localhost:8080/mydev/images/banka.png">退出登录</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </c:when>
            <c:otherwise>



            </c:otherwise>
        </c:choose>

    </div>
</div>





<div class="search">
    <div class="search-white">
        <input type="text" placeholder="搜目的地/攻略" id="searchtext">
    </div>

   <%-- <div class="search-date">
        <div class="layui-input-inline" style="width: 190px;height: 38px">
            <input type="text" class="layui-input" id="test6" placeholder=" 查找的日期范围 " style="color:#adadad ; font-size: 16px;">
        </div>
    </div>--%>

    <div class="search-big">
        <button  onclick="search()" style="background-color: #ff9d00" >
            <div>
                <img src="http://localhost:8080/mydev/images/search.png">
            </div>
        </button>
    </div>

    <script>
        function search() {
            var searchtext = $("#searchtext").val();
            window.location.href="http://localhost:8080/mydev/search/keywords/"+searchtext

        }

    </script>

</div>

<div class="main">
    <div class="main-left">
        <div class="kong">
            <a href="http://localhost:8080/mydev/safeword/safeword.html">
                <img src="http://localhost:8080/mydev/images/safe.png">
            </a>

        </div>


        <div class="activity">
            <span>最新活动</span>
            <a href="">查看全部></a>
        </div>

        <div class="layui-carousel" id="testpig" style="z-index: 1">
            <div carousel-item="">


                <c:forEach var="clubList" items="${clubList}">
                    <div>
                        <img src="${clubList.clubOther1}">
                        <div class="acti-img" >
                            <a>
                              ${clubList.clubName}
                            </a><br>
                            <span> ${clubList.clubTheme}</span>
                        </div>
                    </div>
                </c:forEach>





             <%--   <div>
                    <img src="http://localhost:8080/mydev/images/act2a.jpg">
                    <div class="acti-img" >
                        <a>
                            WEY 爱燃动 全程出发！
                        </a><br>
                        <span>W5炫酷婚旅召集来袭</span>
                    </div>
                </div>--%>





            </div>
        </div>

        <div class="activity">
            <span>旅游攻略推荐</span>
            <a href="">更多</a>
        </div>
        <div class="recommend">

            <a href="">
                <img src="http://localhost:8080/mydev/images/recommend1.jpeg">
            </a>
            <a href="" style=" position:relative;top: 8px;">
                张家界自由行攻略
            </a>

            <div class="tail-all">
                <div class="tail">
                    <span>
                        自由行攻略
                    </span>
                </div>
                <div class="tail-png">
                    <img src="http://localhost:8080/mydev/images/tail.png">
                </div>
            </div>

        </div>







    </div>

    <div class="main-right">


        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this" style="font-size: 20px">热门游记</li>
                <li style="font-size: 20px">最新发表</li>
                <div  class="write-travel" >
                    <c:choose>
                        <c:when test="${memberall.userId != 0}">
                            <a href=" http://localhost:8080/mydev/write/travel" style="text-decoration: none">
                                <div class="write-travel-main">
                                    <img src="http://localhost:8080/mydev/images/bote.png">
                                    <span>写游记</span>
                                </div>
                            </a>
                        </c:when>
                        <c:otherwise>
                            <a href="" style="text-decoration: none">
                                <div class="write-travel-main">
                                    <img src="http://localhost:8080/mydev/images/bote.png">
                                    <span>写游记</span>
                                </div>
                            </a>
                        </c:otherwise>
                    </c:choose>


                </div>
            </ul>

            <div class="layui-tab-content" style="">

                <div class="layui-tab-item layui-show">
                    <%-- 根据点赞数量降序排序--%>
                    <c:forEach var="travelmain" items="${travelList}">
                          <div class="travel">
                      <div class="travel-img">
                          <a href="http://localhost:8080/mydev/travel/${travelmain.travelnote.travId}">
                              <img src="${travelmain.travelnote.travPic}">
                          </a>
                      </div>
                      <a href="http://localhost:8080/mydev/travel/${travelmain.travelnote.travId}">
                          <div class="wrapper">
                              <dt class="">
                                  <a href="http://localhost:8080/mydev/travel/${travelmain.travelnote.travId}" class=" wrapper-dt" style="   text-decoration:none;">
                                          ${travelmain.travelnote.travTitle}
                                  </a>
                              </dt>
                              <br>
                              <div  class="wrapper-tex">
                                  <a href="http://localhost:8080/mydev/travel/${travelmain.travelnote.travId}"  style="text-decoration: none">
                                      <dl>
                                       ${travelmain.travelnote.travOther1}
                                      </dl>
                                  </a>
                              </div>
                              <div class="wraper-png">
                                  <div class="png-one">
                                      <img src="http://localhost:8080/mydev/images/dibiao.png">
                                      <div>
                                          <a href="">  ${travelmain.travelnote.travLoction}</a>
                                          <span>, by</span>
                                      </div>
                                  </div>
                                  <div class="user-all">
                                      <a href="http://localhost:8080/mydev/hishome/mytravel/${travelmain.member.userId}" class="user">
                                          <div class="topmag">
                                              <img src="http://localhost:8080/mydev/${travelmain.member.userPicture}">
                                          </div>
                                          <li>${travelmain.member.userName}</li>
                                      </a>
                                  </div>
                                  <div class="eye">
                                      <img src="http://localhost:8080/mydev/images/eye.png">
                                      <li>${travelmain.travelnote.travLooknumber}</li>
                                  </div>
                                  <div  class="ding" style=" background-image: url(http://localhost:8080/mydev/images/hexagon.png);" >
                                      <div class="dingnum">
                                          <li>${travelmain.travelnote.travPraise}</li>
                                      </div>
                                      <a href="">
                                          <div>
                                              <span>顶</span>
                                          </div>
                                      </a>
                                  </div>
                              </div>
                          </div>
                      </a>
                  </div>
                     </c:forEach>
                   <%-- 页码的渲染--%>
                    <div style="width: 800px;height: 50px;margin: 0 auto;font-size: 15px">
                        <label style="font-size: 15px">共</label><span style="font-size: 15px">${page.pages}页/</span>
                        <label style="font-size: 15px"></label><span style="font-size: 15px">${page.total}条</span>
                        <c:if test="${page.pageNum !=1}">
                            <a href="http://localhost:8080/mydev/start/index?page=${page.pageNum-1}" style="font-size: 15px;color:#ff9e00" class="travelpage">上一页</a>
                        </c:if>

                        <label style="font-size: 15px">当前页码:</label><span style="font-size: 15px">${page.pageNum}</span>

                        <c:choose>
                            <c:when test="${page.pageNum >=2}">


                                <c:if test="${memberall.userStatus ==0}">
                                    <c:if test="${page.pageNum !=page.pages}">
                                        <a href="http://localhost:8080/mydev/start/index?page=${page.pageNum+1}" style="font-size: 15px;color:#ff9e00" class="travelpage">下一页</a>
                                    </c:if>

                                </c:if>

                                <c:if test="${memberall.userStatus ==1}">
                                    <a href="http://localhost:8080/mydev/VIP" style="font-size: 15px;color:#ff9e00" class="travelpage">开通vip查看更多</a>
                                </c:if>



                            </c:when>
                            <c:otherwise>
                                <a href="http://localhost:8080/mydev/start/index?page=${page.pageNum+1}" style="font-size: 15px;color:#ff9e00" class="travelpage">下一页</a>
                            </c:otherwise>
                        </c:choose>
                    </div>

                </div>

                <div class="layui-tab-item">
                    <%-- 根据发表时间升序排序--%>
                    <c:forEach var="traveldata" items="${travelListdata}">
                        <div class="travel">
                            <div class="travel-img">
                                <a href="http://localhost:8080/mydev/travel/${traveldata.travelnote.travId}">
                                    <img src="${traveldata.travelnote.travPic}">
                                </a>
                            </div>
                            <a href="http://localhost:8080/mydev/travel/${traveldata.travelnote.travId}">
                                <div class="wrapper">
                                    <dt class="">
                                        <a href="http://localhost:8080/mydev/travel/${traveldata.travelnote.travId}" class=" wrapper-dt" style="   text-decoration:none;">
                                                ${traveldata.travelnote.travTitle}
                                        </a>
                                    </dt>
                                    <br>
                                    <div  class="wrapper-tex">
                                        <a href="http://localhost:8080/mydev/travel/${traveldata.travelnote.travId}"  style="text-decoration: none">
                                            <dl>
                                                ${traveldata.travelnote.travOther1}
                                            </dl>
                                        </a>
                                    </div>
                                    <div class="wraper-png">
                                        <div class="png-one">
                                            <img src="http://localhost:8080/mydev/images/dibiao.png">
                                            <div>
                                                <a href="">  ${traveldata.travelnote.travLoction}</a>
                                                <span>, by</span>
                                            </div>
                                        </div>
                                        <div class="user-all">
                                            <a href="http://localhost:8080/mydev/hishome/mytravel/${travelmain.member.userId}" class="user">
                                                <div class="topmag">
                                                    <img src="http://localhost:8080/mydev/${traveldata.member.userPicture}">
                                                </div>
                                                <li>${traveldata.member.userName}</li>
                                            </a>
                                        </div>
                                        <div class="eye">
                                            <img src="http://localhost:8080/mydev/images/eye.png">
                                            <li>${traveldata.travelnote.travLooknumber}</li>
                                        </div>
                                        <div  class="ding" style=" background-image: url(http://localhost:8080/mydev/images/hexagon.png);" >
                                            <div class="dingnum">
                                                <li>${traveldata.travelnote.travPraise}</li>
                                            </div>
                                            <a href="">
                                                <div>
                                                    <span>顶</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </c:forEach>
                    <%-- //页码的渲染--%>
                    <div style="width: 800px;height: 50px;margin: 0 auto;font-size: 15px">


                        <label style="font-size: 15px">共</label><span style="font-size: 15px">${pagedata.pages}页/</span>
                        <label style="font-size: 15px"></label><span style="font-size: 15px">${pagedata.total}条</span>
                        <c:if test="${pagedata.pageNum !=1}">
                            <a href="http://localhost:8080/mydev/start/index?datapage=${pagedata.pageNum-1}" style="font-size: 15px;color:#ff9e00">上一页</a>
                        </c:if>

                        <label style="font-size: 15px">当前页码:</label><span style="font-size: 15px">${pagedata.pageNum}</span>



                        <c:choose>
                            <c:when test="${pagedata.pageNum >=2}">


                                <c:if test="${memberall.userStatus ==0}">
                                    <c:if test="${pagedata.pageNum != pagedata.pages}">
                                        <a href="http://localhost:8080/mydev/start/index?datapage=${pagedata.pageNum+1}" style="font-size: 15px;color:#ff9e00" class="travelpage">下一页</a>
                                    </c:if>

                                </c:if>

                                <c:if test="${memberall.userStatus ==1}">
                                    <a href="http://localhost:8080/mydev/VIP" style="font-size: 15px;color:#ff9e00" class="travelpage">开通vip查看更多</a>
                                </c:if>

                            </c:when>

                            <c:otherwise>
                                <a href="http://localhost:8080/mydev/start/index?datapage=${pagedata.pageNum+1}" style="font-size: 15px;color:#ff9e00" class="travelpage">下一页</a>
                            </c:otherwise>
                        </c:choose>

                    </div>


                </div>
            </div>



        </div>




    </div>
</div>



<!--底部-->



<script src="http://localhost:8080/mydev/layui/layui.js" charset="utf-8"></script>
<script>


    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;





        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '1525px'
            ,height: '508px'
            ,interval: 5000
        });

        carousel.render({
            elem: '#testpig'
            ,width: '260px'
            ,height: '250px'
            ,interval: 4000
        });
    });

    layui.use('element', function(){
        var element = layui.element;

    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //日期范围
        laydate.render({
            elem: '#test6'
            ,range: true
        });
    });


    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>

<div class="buttom">
    <div class="left-buttom" >
        <p style="font-size: 15px">逍遥游攻略网</p>
        <p>年轻人更爱用的攻略</p>
        <p>逍遥游攻略网</p>
        <p>无数旅行者共同打造的"旅行神器"</p>
        <p>  60,000 多个全球旅游目的地 </p>
        <p>  600,000 个细分目的地新玩法</p>
        <p>  760,000,000 次攻略下载</p>
    </div>
    <div class="mid-buttom" >
        <p style="font-size: 15px">关于我们</p>
        <a href="">关于逍遥游</a> &nbsp <a href="">联系我们</a> </br>
        <a href="">隐私政策</a> &nbsp <a href="">商标声明</a> </br>
        <a href="">服务协议</a> &nbsp <a href="">游记协议</a> </br>
        <a href="">商城平台服务协议</a> </br>
        <a href="">网络信息侵权通知引导</a><br>
        <a href="">旅游网服务监督员</a>
    </div>
    <div class="right-buttom" >
        <p  style="font-size: 15px">旅行服务</p>
        <a href="">旅游攻略</a> &nbsp <a href="">酒店预订</a> </br>
        <a href="">旅游特价</a> &nbsp <a href="">国际租车</a> </br>
        <a href="">旅游问答</a> &nbsp <a href="">旅游保险</a> </br>
        <a href="">旅游指南</a> &nbsp <a href="">订火车票</a> </br>
        <a href="">旅游资讯</a> &nbsp <a href="">APP下载</a> </br>

    </div>

    <div class="link-buttom">
        <img src="http://localhost:8080/mydev/images/erweima1B.png"></br>
        <p>app下载</p>
    </div>
    <div class="link-buttom">
        <img src="http://localhost:8080/mydev/images/erweima2B.png">
        <p>公众号</p>
    </div>
    <div class="link-buttom">
        <img src="http://localhost:8080/mydev/images/erweima3B.png">
        <p>订阅号</p>
    </div>



</div>
<div class="dixian">我们是有底线的</div>




</body>
</html>
